<template>
	<mainHeader title="账本">
		<view class="index_top">
			<uni-datetime-picker class="safe" v-model="showTime" type="date" :style="'--background:'+store.state.theme"
				:key="store.state.theme">
				<view class="index_time oneLine">
					{{showTime}}
				</view>
			</uni-datetime-picker>
			<image class="index_tool" @click="gotoSetting()" src="@/static/base/setting-two.png"></image>
		</view>
	</mainHeader>
	<scroll-view scroll-y class="header_scroll">
		<view class="index">
			<view class="index_all index_list_box base_box clickBox" @longpress="gotoMainStatistics()">
				<view class="index_all_top ">
					<view class="index_all_top_left oneLine">
						<view class="index_all_top_left_title">
							本月结余
						</view>
						<view class="index_all_top_left_text oneLine">
							{{moneySymbol}}{{theMonthData?.total.toLocaleString()}}
						</view>
					</view>
					<view class="index_all_top_right">
						{{dateTypeFormat('m.d',new Date(showTime),"first")}}~{{dateTypeFormat('m.dd',new Date(showTime),"end")}}
					</view>
				</view>
				<view class="index_all_show ">
					<view class="index_all_show_box oneLine ">
						<view class="index_all_show_title">
							本月收入
						</view>
						<view class="index_all_show_text oneLine " :class="'incomeColor_'+store.state.setting.typeTag">
							{{moneySymbol}}{{takeBigNumber(theMonthData?.income)}}
						</view>
					</view>
					<view class="index_all_show_box oneLine ">
						<view class="index_all_show_title ">
							本月支出
						</view>
						<view class="index_all_show_text oneLine "
							:class="'expensesColor_'+store.state.setting.typeTag">
							{{moneySymbol}}{{takeBigNumber(theMonthData?.expenses)}}
						</view>
					</view>
				</view>
			</view>
			<!-- 预算 -->
			<view v-show="showYusuan">
				<indexBudgetVue v-on:click="gotoBudget()" :time="month" />
			</view>
			<view class="index_list_box base_box index_list_box_first" v-for="(one,index) in theDayData" :key="one"
				v-if="Object.keys(theDayData).length > 0">
				<TextOneTitle2Vue :left="dateTypeFormat('mm-dd',new Date(one.list[0].timeValue))"
					:right="moneySymbol+one.total" />
				<view @click="gotoDetail(item)"  v-for="(item ,index) in one.list">
					<TextOneLine3Vue :first="item.showOne" :mid="item.notesValue" :end="moneySymbol+item.addValue"
						:tag="item.showClass" :key="item" />
				</view>
			</view>
			<noneTextVue title="今日无记录" v-else />
			<view class="index_list_box base_box" v-for="(one,index) in theDayOhter" :key="one">
				<TextOneTitle2Vue :left="dateTypeFormat('mm-dd',new Date(one.list[0].timeValue))"
					:right="moneySymbol+one.total" />
				<view @click="gotoDetail(item)" v-for="(item ,index) in one.list">
					<TextOneLine3Vue :first="item.showOne" :mid="item.notesValue" :end="moneySymbol+item.addValue"
						:tag="item.showClass"  :key="item" />
				</view>
			</view>
		</view>
	</scroll-view>
	<addPopupButtomVue />
</template>

<script setup>
	import indexBudgetVue from "@/components/index_budget.vue";
	import addPopupButtomVue from "@/components/addPopupButtom.vue";
	import ClickShowTextVue from "@/components/base/ClickShowText.vue";
	import noneTextVue from "@/components/base/noneText.vue";
	import TextOneTitle2Vue from "@/components/TextOneTitle2.vue";
	import TextOneLine3Vue from "@/components/TextOneLine3.vue";
	import {
		dateTypeFormat,
		takeBigNumber,
		takeClassList
	} from "@/uitls/tool.js"
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import store from '@/store/index.js';
	const moneySymbol = computed(() => store.state.setting.MoneySymbol)
	const allData = computed(() => store.state.mainData.allData)
	const showYusuan = computed(() => store.state.setting.showYusuan);
	const gotoSetting = () => {
		uni.navigateTo({
			url: "/subPages/settings/settings",
			animationType: 'slide-in-right',
		})
	}
	const gotoDetail = (x) => {
		console.log("gotoDetail", x)
		let theMonthIndex = allData.value[month.value].indexOf(x)
		uni.navigateTo({
			url: `/subPages/theDetail/theDetail?theMonth=${month.value}&theMonthIndex=${theMonthIndex}`,
			animationType: 'zoom-fade-out',
		})
	}
	const gotoBudget = () => {
		uni.navigateTo({
			url: `/subPages/budget/budget?time=${month.value}`,
			animationType: 'zoom-fade-out',
		})
	}
	const gotoMainStatistics = () => {
		let year = dateTypeFormat('YYYY', new Date(showTime.value))
		uni.navigateTo({
			url: `/subPages/mainStatistics/mainStatistics?time=${year}`,
			animationType: 'zoom-fade-out',
		})
	}
	const showTime = ref(dateTypeFormat('YYYY-mm-dd', new Date()))
	const theMonthData = ref()
	const theDayData = ref({})
	const theDayOhter = ref()
	watch(() => showTime.value, (n) => {
		theDayOhter.value = getTheDayOhter()
		store.state.indexShowTime = showTime.value
		if (uni.getWindowInfo().windowWidth >= 961) uni.$emit('updateStatistics')
		// uni.$emit('updateStatistics') // 切换 触发右侧统计页 更新
	})
	watch(() => store.state.indexShowTime, (n) => {
		showTime.value = n
	})
	let month = computed(() => dateTypeFormat('YYYY-mm', new Date(showTime.value))) //月份
	const getTheDayOhter = () => {
		let theDayDataT = {}
		let theMonthDataT = { //这个月份总体
			time: month.value,
			total: 0,
			income: 0,
			expenses: 0
		}
		let showdate = allData.value[month.value] || []
		let have = {};
		showdate.forEach((item) => { // 将数据 以日期分类 
			let iTime = item.timeValue
			if (have[iTime] == null) {
				have[iTime] = {
					list: [],
					total: 0,
					income: 0,
					expenses: 0
				}
			}
			have[iTime].list.push(item)
			if (item.showClass === 1) { // 1为收入 
				have[iTime].income += parseFloat(item.addValue);
				have[iTime].total += parseFloat(item.addValue);
			} else {
				have[iTime].expenses += parseFloat(item.addValue);
				have[iTime].total -= parseFloat(item.addValue);
			}
			// 更新整月数据  
			theMonthDataT.total += parseFloat(item.addValue) * (item.showClass === 1 ? 1 : -1);
			theMonthDataT.income += item.showClass === 1 ? parseFloat(item.addValue) : 0;
			theMonthDataT.expenses += item.showClass !== 1 ? parseFloat(item.addValue) : 0;
		})
		theMonthData.value = theMonthDataT
		store.state.useData.theMonthData = theMonthDataT
		if (have[showTime.value]) {
			theDayDataT[showTime.value] = have[showTime.value]
		}
		theDayData.value = theDayDataT

		function excludeProperty(obj, prop) { // 使用剩余属性 分离某个属性
			const {
				[prop]: omitted, ...rest
			} = obj;
			return rest;
		}
		return excludeProperty(have, showTime.value)
	}
	theDayOhter.value = getTheDayOhter()
	uni.$on('updateIndex', () => {
		theDayOhter.value = getTheDayOhter()
	})
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.index_top {
		display: flex;
		align-items: center;
		--background:#{$themeBgWhite};

		::v-deep .uni-calendar__content {
			background: var(--background) !important;
			border-top: $baseBorder;
			bottom: 0;
			padding-bottom: calc(var(--window-bottom));
		}

		.index_time {
			font-weight: bold;
		}

		.index_tool {
			margin: 0 0.1em 0 0.5em;
			width: $iconSize_base;
			height: $iconSize_base;
		}
	}

	.index {
		.index_all {
			.index_all_top {
				display: flex;
				justify-content: space-between;

				.index_all_top_left {
					flex: 1;

					&_title {
						font-size: $midFontsize;
						font-weight: bold;
						margin: 0.2em;
						width: fit-content;
					}

					&_text {
						font-size: $mainBigFontsize;
						overflow-x: hidden;
					}
				}

				.index_all_top_right {
					flex-shrink: 0;
					font-size: $midFontsize;
					color: $baseBlack_mid;
				}
			}

			.index_all_show {
				display: flex;
				justify-content: space-evenly;
				margin: 1em;
				margin-top: 2em;

				.index_all_show_box {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $baseBlack_big;

					.index_all_show_title {
						font-size: $midFontsize;
					}

					.index_all_show_text {
						max-width: 100%;
						margin-left: -0.5em;
						margin-top: 0.3em;
						font-size: $bigFontsize;
					}
				}
			}
		}

		.index_list_box_first {
			border-top: $baseColorBorder;
			border-bottom: $baseColorBorder;
		}
	}
</style>